<template>
	<view class="flex-1 hei-full index-page">
		<view class="flex-row pad-title border-bottom bg-white">
			<view class="flex-1"><text class="bold">{{user.userName || user.staffName}}-{{user.bindPhone}}</text></view>
		</view>
		<!-- 	<view class="flex-row mar-top10 mar-left5 border-bottom">
			<view class="flex-1"><text class="bold">店推业务</text></view>
		</view> -->
		<view class="">
			<uni-section title="店推业务" type="line">
				<uni-grid ref="gridRef" :column="4" :highlight="true" :square="false" :showBorder="false">
					<uni-grid-item v-for="(item, index) in menuList" :index="index" :key="index">
						<view class="hei-full pad5">
							<view class="content border-radius5 pad-item bg-white" @click="menuClick(item)">
								<view>
									<image :src="item.img" class="img"></image>
								</view>
								<view class="mar-top10"><text class="nav-title">{{item.navText}}</text></view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		<!-- 	<view class="flex-row mar-top10 mar-left5 border-bottom">
			<view class="flex-1"><text class="bold">其他</text></view>
		</view> -->
		<view class="">
			<uni-section title="其他" type="line">
				<uni-grid ref="gridRef" :column="4" :highlight="true" :square="false" :showBorder="false">
					<uni-grid-item v-for="(item, index) in menuList1" :index="index" :key="index">
						<view class="hei-full pad5">
							<view class="content border-radius5 pad-item bg-white" @click="menuClick(item)">
								<view>
									<image :src="item.img" class="img"></image>
								</view>
								<view class="mar-top10"><text class="nav-title">{{item.navText}}</text></view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, nextTick } from "vue"
	import { onReady, onLoad, onShow } from '@dcloudio/uni-app'
	import { useUserStore, useUserStoreHook } from "@/store/user"
	import { checkLogin } from '@/utils/index'
	import defaultConfig from "@/config";
	import Toast from '@/utils/Toast'
	const menuList = ref([]);
	const menuList1 = ref([]);
	const gridRef = ref();
	const user = computed(() => {
		return useUserStore().user || {};
	});
	const userInfo = computed(() => {
		return useUserStore().userInfo || {};
	});
	const getMenu = (role : number) => {
		let list = [];
		if (role == 1) {
			list = [
				{ path: "/pages/waitStore/index", navText: "待到店清单", img: '/static/images/dddicon.png', roles: [] },
				{ path: "/pages/waitStore/newStore", navText: "新店家", img: '/static/images/xdjicon.png', roles: [] },
				{ path: "/pages/history/compare", navText: "历史比价", img: '/static/images/lsbj.png', roles: [] },
				{ path: "/pages/inquiry/inquiry", navText: "询价试试", img: '/static/images/xjss.png', roles: [] },
			];
		} else {
			list = [
				{ path: "/pages/storePerformance/index", navText: "到店业绩", img: '/static/images/yjicon.png', roles: [] },
				{ path: "logout", navText: "退出", type: 'action', img: '/static/images/warning.png' },
				{ path: "viewVersion", navText: "版本", type: 'action', img: '/static/images/icon/version.png' },
				// { path: "/pages/today/tranship/tranship", navText: "我的", img: '/static/images/wdicon.png',roles:[] },
			];
		}

		return list;
	}
	onShow(() => {
		nextTick(() => {
			menuList.value = getMenu(1)
			menuList1.value = getMenu(2)
			setTimeout(() => {
				// gridRef.value.init();
			}, 500);
		})

	})
	const menuClick = (item : any) => {
		if (item.type == 'action') {
			if (item.path == 'logout') {
				useUserStoreHook().clearUserInfo()
			} else if (item.path == 'viewVersion') {
				Toast.message(`版本号:V${defaultConfig.version}`)
			}
		} else {
			goto(item.path)
		}
	}
	const goto = (path) => {
		uni.navigateTo({
			url: path
		})
	}
	checkLogin()
</script>


<style lang="scss">
	// uni-page-body {
	// 	height: 100%;
	// }
	.index-page {
		font-size: $uni-font-size-base;
	}

	.flex-1 {
		flex: 1;
	}

	.hei-full {
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pad5 {
		padding: 5px;
	}

	.border-radius5 {
		border-radius: 5px;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-1 {
		flex: 1;
	}

	.color-link {
		color: #0099FF;
	}

	.bold {
		font-weight: 700;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #3d4194;
	}

	.pad-title {
		padding: 15px 10px;
	}

	.border-bottom {
		border-bottom: 1px solid #f5f5f5;
	}

	.nav-title {
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
	}

	.bg-page {
		background-color: $uni-bg-color-grey;
	}

	.bg-white {
		background-color: $uni-bg-color;
	}

	.img {
		width: 40px;
		height: 40px;
	}

	.mar-top10 {
		margin-top: 10px;
	}

	.mar-top5 {
		margin-top: 5px;
	}

	.pad-item {
		padding: 10px 5px;
	}

	.mar-left5 {
		margin-left: 5px;
	}
</style>